<template>
    <div class="layout-head">
        <div class="left">
            <div class="logo">
             logo
            </div>
        </div>

        <div class="center">
            <div class="seach">
                <n-input type="text" size="large" placeholder="请输入" />
            </div>
        </div>
        <div class="right">
            <n-space>
                <n-dropdown v-if="userInfo.userId" trigger="click" placement="bottom-end" :options="dropdownOptions"
                    :show-arrow="true" @select="handleSelect">
                    <div class="avatar">
                        <img v-if="userInfo.avatar" :src="global.$imgBase + userInfo.avatar" />
                        <img v-else src="@/assets/user.png" /> 
                    </div>
                </n-dropdown>
                <div class="login-but-warp" v-else>
                    <n-button quaternary size="large" @click="handleLogin">
                        登录/注册
                    </n-button>
                    <!-- <div></div>
      <n-button quaternary size="small" @click="handleRegister">
        注册
      </n-button> -->
                </div>
            </n-space>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { NAvatar, NIcon, NDropdown, NButton, NSpace, NInput, NBadge } from 'naive-ui'


// import { getCookie } from '@/utils/index.js'
// import { getStorage } from '@/utils/storage.js'

// console.log(getCookie());
// console.log(getStorage());
// defineProps({
//     msg: String
// })
const dropdownOptions = ref([
    {
        label: '个人中心',
        key: '1',
    },
    {
        label: '退出登录',
        key: '2',
    }
]);

const userInfo = ref({ userId: 'asdas' })
</script>
<style lang="less" scoped>
.layout-head {
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: space-between;

    .left,
    .right {
        padding: 0 20px;
        width: 300px;
    }

    .left {
        .logo {
            display: flex;
            align-items: center;


            img {
                height: 30px;
            }

            h1 {
                margin: 0;
            }
        }
    }

    .center {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        .seach {
            width: 40%;

            .n-input {
                background-color: #f7f7fa;
                // border: 0 !important;
                // :deep(.n-input-wrapper){ 
                // }
            }

        }
    }

    .right {
        display: flex;
        justify-content: flex-end;

        .avatar {
            display: flex;
            align-items: center;
            cursor: pointer;

            >span {
                margin-left: 5px;
            }

            >i {
                margin-left: 5px;
            }

            img {
                width: 35px;
                height: 35px;
                border-radius: 100px;
                border: 1px solid #ddd;
                margin-right: 5px;
            }

            // height: 100%;
        }
    }
}
</style>